<template>
  <div class="dialog self_scroll width_100 height_100 flex-center" >
    <img src="@/assets/dialogBox/images/close.png" alt="" class="close cp" @click="closeDialog">
    <img :src="originData.src" :class="!isTopScroll ? 'minCenter' : ''" alt="" :width="editWidth">
  </div>
</template>

<script>
export default {
  computed: {
    originData () { // 原图数据
      return this.$store.state.common.originImage
    },
    isTopScroll () { // 原图高度是否高于界面
      return this.originData.height > document.body.clientHeight
    },
    editWidth () { // 编辑宽度
      let width = this.originData.width
      if (this.originData.width > document.body.clientWidth) {
        width = document.body.clientWidth * 0.75
      }
      return width
    }

  },
  methods: {
    closeDialog () {
      this.$store.commit('common/set_ifShowOriginDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
  .dialog{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,0.49);
    img.minCenter{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    img.close{
      width: 35px;
      position: fixed;
      top: 50px;
      right: 60px;
      transition: all 1s;
      &:hover{
        transform: rotate(360deg);
      }
    }
  }
</style>
